import { NavBar, InfiniteScroll, Popup } from 'antd-mobile'
import CommentFooter from '../CommentFooter'
import NoComment from '../NoComment'
import CommentItem from '../CommentItem'
import CommentInput from '../CommentInput'
import styles from './index.module.scss'
import { Comment, CommentRes, ApiResponse } from '@/types/data'
import { useState } from 'react'
import request from '@/utils/request'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { addReplyCount } from '@/store/actions/article'

type Props = {
  // normal 普通 - 文章的评论
  // origin 回复评论的原始评论，也就是对哪个评论进行回复
  // reply 回复评论
  // type?: 'normal' | 'reply' | 'origin'
  hideReply: () => void
  origin: Comment
  // onReply: (comment: Comment) => void
}
export default function CommentReply({ hideReply, origin }: Props) {
  const dispatch = useDispatch()
  const [reply, setReply] = useState<CommentRes>({} as CommentRes)

  const { last_id, end_id = '' } = reply
  const hasMore = last_id !== end_id

  const loadMore = async () => {
    const res = await request.get<ApiResponse<CommentRes>>('/comments', {
      params: {
        type: 'c',
        source: origin.com_id,
        offset: reply.last_id
      }
    })
    setReply({
      ...res.data.data,
      results: [...(reply.results || []), ...res.data.data.results]
    })
  }

  // 添加回复
  const [show, setShow] = useState(false)
  const showComment = () => {
    setShow(true)
  }
  const hideComment = () => {
    setShow(false)
  }
  const { art_id } = useSelector((state: RootState) => state.article.info)
  const onReply = async (value: string) => {
    const res = await request.post<ApiResponse<{ new_obj: Comment }>>(
      '/comments',
      {
        target: origin.com_id,
        content: value,
        art_id
      }
    )
    const old = reply.results || []
    setReply({
      ...reply,
      results: [res.data.data.new_obj, ...old]
    })
    // 让评论的数量+1
    dispatch(addReplyCount(origin.com_id))
    hideComment()
  }
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar className="transparent-navbar" onBack={hideReply}>
          <div>{origin.reply_count}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem comment={origin} type="reply"></CommentItem>
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {origin.reply_count === 0 ?
            (<NoComment />) :
            (
              reply.results?.map((item) => (
                <CommentItem
                  type="reply"
                  comment={item}
                  key={item.com_id}
                ></CommentItem>
              ))
            )
          }
          <InfiniteScroll
            hasMore={hasMore}
            loadMore={loadMore}
          ></InfiniteScroll>
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter type="reply" showComment={showComment} />

        {/* 添加回复的弹窗 */}
        <Popup visible={show} position="right" destroyOnClose>
          <CommentInput
            onAddComment={onReply}
            hideComment={hideComment}
            name={origin.aut_name}
          ></CommentInput>
        </Popup>
      </div>
    </div>
  )
}
